<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Headers</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="styles/reset.min.css" />
    <link rel="stylesheet" href="styles/style.css" />
    <link rel="stylesheet" href="styles/home.css" />

    <meta name="twitter:title" content="Headers.css" />
    <meta name="twitter:card" content="summary_large_image" />
    <meta
      name="twitter:description"
      content="The HTML and CSS for 17+ website headers"
    />
    <meta name="twitter:site" content="@shadeed9" />
    <meta name="twitter:creator" content="@shadeed9" />
    <meta
      name="twitter:image"
      content="https://headers-css.vercel.app/img/card.jpg"
    />

    <meta name="og:title" content="Headers.css" />
    <meta
      name="og:site_name"
      content="The HTML and CSS for 17+ website headers"
    />
    <meta
      name="og:image"
      content="https://headers-css.vercel.app/img/card.jpg"
    />
    <meta name="og:type" content="website" />
    <meta name="og:locale" content="en_US" />

    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script
      async
      src="https://www.googletagmanager.com/gtag/js?id=UA-42479265-6"
    ></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag() {
        dataLayer.push(arguments);
      }
      gtag("js", new Date());

      gtag("config", "UA-42479265-6");
    </script>
  </head>
  <body>
    <header>
      <img role="presentation" src="img/header-icon.svg" alt="" />
      <h1>headers.css</h1>
      <p>The blueprint HTML and CSS for <strong>17+</strong> website headers</p>
      <p class="links-wrapper">
        <a class="link" href="https://github.com/shadeed/headers-css"
          ><svg
            height="512"
            viewBox="0 0 24 24"
            width="512"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M12.29 21.499c3.73 0 8.94.09 10.835-3.701.715-1.449.875-3.122.875-4.7h-.001c0-2.073-.575-4.047-1.95-5.651a7.558 7.558 0 00.385-2.385c0-1.064-.24-1.598-.73-2.563-2.24 0-3.69.42-5.39 1.742a17.46 17.46 0 00-4.02-.455c-1.495 0-2.986.154-4.435.495C6.134 2.945 4.684 2.5 2.419 2.5c-.484.965-.729 1.499-.729 2.563 0 .811.125 1.632.385 2.414C.695 9.066 0 11.025 0 13.098c0 1.578.281 3.266 1.01 4.701 1.97 3.835 7.49 3.7 11.28 3.7zm-5.289-9.99c.95 0 1.865.168 2.8.297 3.418.52 5.215-.297 7.31-.297 2.339 0 3.675 1.915 3.675 4.087 0 4.349-4.015 5.012-7.53 5.012h-2.41c-3.5 0-7.52-.667-7.52-5.012 0-2.172 1.334-4.087 3.675-4.087z"
            />
            <path
              d="M16.655 18.323c1.29 0 1.835-1.692 1.835-2.727s-.545-2.727-1.835-2.727-1.835 1.692-1.835 2.727.545 2.727 1.835 2.727zM7.47 18.323c1.29 0 1.835-1.692 1.835-2.727S8.759 12.87 7.47 12.87s-1.835 1.692-1.835 2.727.545 2.726 1.835 2.726z"
            />
          </svg>
          View on Github</a
        >
        <a
          class="link link--secondary"
          href="https://twitter.com/intent/tweet?text=Headers.css%20by%20@shadeed9%20https://headers-css.vercel.app/"
        >
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
            <path
              d="M512 97.248c-19.04 8.352-39.328 13.888-60.48 16.576 21.76-12.992 38.368-33.408 46.176-58.016-20.288 12.096-42.688 20.64-66.56 25.408C411.872 60.704 384.416 48 354.464 48c-58.112 0-104.896 47.168-104.896 104.992 0 8.32.704 16.32 2.432 23.936-87.264-4.256-164.48-46.08-216.352-109.792-9.056 15.712-14.368 33.696-14.368 53.056 0 36.352 18.72 68.576 46.624 87.232-16.864-.32-33.408-5.216-47.424-12.928v1.152c0 51.008 36.384 93.376 84.096 103.136-8.544 2.336-17.856 3.456-27.52 3.456-6.72 0-13.504-.384-19.872-1.792 13.6 41.568 52.192 72.128 98.08 73.12-35.712 27.936-81.056 44.768-130.144 44.768-8.608 0-16.864-.384-25.12-1.44C46.496 446.88 101.6 464 161.024 464c193.152 0 298.752-160 298.752-298.688 0-4.64-.16-9.12-.384-13.568 20.832-14.784 38.336-33.248 52.608-54.496z"
            /></svg
          >Spread the word</a
        >
      </p>
    </header>

    <section>
      <div class="wrapper content">
        <h2>Introduction</h2>
        <p>
          Since I don’t use CSS frameworks in my front-end work, I needed a way
          to quickly build a header component without doing it from scratch for
          each new project. I don’t think I’m the only one who thinks in the
          same way.
        </p>
        <p>
          As a start, I created <strong>17 headers</strong> with slight
          differences between them. This is an ongoing project so expect more
          headers coming your way.
        </p>

        <p>
          If you have a suggestion, please use Github issues and I will be happy
          to implement it.
        </p>

        <img src="img/header-css.jpg" alt="" />
      </div>
    </section>

    <section>
      <div class="wrapper content">
        <h2>Demo</h2>
        <ul class="demo">
          <li><a href="header-1.html">Header 1</a></li>
          <li><a href="header-2.html">Header 2</a></li>
          <li><a href="header-3.html">Header 3</a></li>
          <li><a href="header-4.html">Header 4</a></li>
          <li><a href="header-5.html">Header 5</a></li>
          <li><a href="header-6.html">Header 6</a></li>
          <li><a href="header-7.html">Header 7</a></li>
          <li><a href="header-8.html">Header 8</a></li>
          <li><a href="header-9.html">Header 9</a></li>
          <li><a href="header-10.html">Header 10</a></li>
          <li><a href="header-11.html">Header 11</a></li>
          <li><a href="header-12.html">Header 12</a></li>
          <li><a href="header-13.html">Header 13</a></li>
          <li><a href="header-14.html">Header 14</a></li>
          <li><a href="header-15.html">Header 15</a></li>
          <li><a href="header-16.html">Header 16</a></li>
          <li><a href="header-17.html">Header 17</a></li>
        </ul>
      </div>
    </section>

    <footer>
      <div class="wrapper">
        <h2>About the creator</h2>
        <div class="author">
          <img class="author-avatar" src="img/shadeed.jpg" alt="" />
          <div class="author-meta">
            <h3 class="author-name">Ahmad Shadeed</h3>
            <p class="author-desc">
              Author of
              <a href="http://debuggingcss.com/">Debugging CSS book</a>, writing
              on <a href="http://ishadeed.com/">ishadeed.com</a>,
              <a href="https://www.rtlstyling.com/">rtlstyling.com</a>,
              <a href="https://www.a11ymatters.com/">a11ymatters.com</a>
            </p>
          </div>
        </div>
        <p>
          An open-source project by
          <a href="http://ishadeed.com/">Ahmad Shadeed</a>.
        </p>
        <p>
          Follow on
          <a href="https://twitter.com/shadeed9">Twitter [@shadeed9]</a>
        </p>
      </div>
    </footer>
  </body>
</html>
